<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>React App</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <script type="text/javascript">
        var ctx_base64 = 'eyJjb25maWciOnsicmVhY3QiOnsiaW5wdXRzIjp7InJlYWN0X2FwcCI6Ii4vZGlzdC9hcHAvaW5kZXgubWVyZ2VkLm1pbi5qcyJ9fX0sImlucHV0cyI6eyJyZWFjdF9hcHAiOiIuL2Rpc3QvYXBwL2luZGV4Lm1lcmdlZC5taW4uanMifSwicmVzcG9uc2UiOnsiZGF0YSI6eyJ0aXRsZSI6IkNoYXQgYm90In0sImVycm9yIjpudWxsfSwicmVxdWVzdCI6eyJib2R5Ijp7fX19';
    </script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <div id="root"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    
    <script type="text/babel">
"use strict";// public/app.js
function _toConsumableArray(a){return _arrayWithoutHoles(a)||_iterableToArray(a)||_unsupportedIterableToArray(a)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArray(a){if("undefined"!=typeof Symbol&&null!=a[Symbol.iterator]||null!=a["@@iterator"])return Array.from(a)}function _arrayWithoutHoles(a){if(Array.isArray(a))return _arrayLikeToArray(a)}function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_unsupportedIterableToArray(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(b,c){if(b){if("string"==typeof b)return _arrayLikeToArray(b,c);var a={}.toString.call(b).slice(8,-1);return"Object"===a&&b.constructor&&(a=b.constructor.name),"Map"===a||"Set"===a?Array.from(b):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?_arrayLikeToArray(b,c):void 0}}function _arrayLikeToArray(b,c){(null==c||c>b.length)&&(c=b.length);for(var d=0,f=Array(c);d<c;d++)f[d]=b[d];return f}function _iterableToArrayLimit(b,c){var d=null==b?null:"undefined"!=typeof Symbol&&b[Symbol.iterator]||b["@@iterator"];if(null!=d){var g,h,j,k,l=[],a=!0,m=!1;try{if(j=(d=d.call(b)).next,0===c){if(Object(d)!==d)return;a=!1}else for(;!(a=(g=j.call(d)).done)&&(l.push(g.value),l.length!==c);a=!0);}catch(a){m=!0,h=a}finally{try{if(!a&&null!=d["return"]&&(k=d["return"](),Object(k)!==k))return}finally{if(m)throw h}}return l}}function _arrayWithHoles(a){if(Array.isArray(a))return a}var _React=React,useState=_React.useState,useEffect=_React.useEffect;function ChatBot(){var a=Math.floor,b=useState([]),c=_slicedToArray(b,2),d=c[0],f=c[1],g=useState(""),h=_slicedToArray(g,2),i=h[0],j=h[1],k=JSON.parse(atob(ctx_base64));useEffect(function(){f(function(b){return[].concat(_toConsumableArray(b),[{text:"Hello! Let share a fact about cats. Ok?",sender:"bot",id:a(100*Math.random())}])}),f(function(b){return[].concat(_toConsumableArray(b),[{text:k.response.data.fact,sender:"bot",id:a(100*Math.random())}])})},[]);return/*#__PURE__*/React.createElement("div",{className:"bg-white rounded-lg shadow-md w-96 overflow-hidden"},/*#__PURE__*/React.createElement("h1",{className:"bg-blue-500 text-white text-center py-4 text-xl font-bold"},"Simple ",k.request.params.workflow),/*#__PURE__*/React.createElement("div",{className:"h-96 overflow-y-auto p-4 space-y-4"},d.map(function(a){return/*#__PURE__*/React.createElement("div",{key:a.id,className:"p-2 rounded-lg ".concat("user"===a.sender?"bg-blue-500 text-white ml-auto":"bg-gray-200 text-gray-800"," max-w-[80%] ").concat("user"===a.sender?"text-right":"text-left")},a.text)})),/*#__PURE__*/React.createElement("form",{onSubmit:function(b){b.preventDefault(),i.trim()&&(f([].concat(_toConsumableArray(d),[{text:i,sender:"user",id:a(100*Math.random())}])),j(""),setTimeout(function(){f(function(b){return[].concat(_toConsumableArray(b),[{text:"You said: ".concat(i),sender:"bot",id:a(100*Math.random())}])})},500))},className:"p-4 border-t border-gray-200"},/*#__PURE__*/React.createElement("div",{className:"flex"},/*#__PURE__*/React.createElement("input",{type:"text",value:i,onChange:function(a){return j(a.target.value)},placeholder:"Type your message...",className:"flex-grow px-3 py-2 border rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"}),/*#__PURE__*/React.createElement("button",{type:"submit",className:"bg-blue-500 text-white px-4 py-2 rounded-r-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"},"Send"))))}ReactDOM.render(/*#__PURE__*/React.createElement(ChatBot,null),document.getElementById("root"));

</script>
</body>
</html>